<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="集群名称">
            <el-input v-model="formInline.clusterName" clearable placeholder="请输入集群名称" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser"><Icon type="md-add" />创建集群</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <ykhttb
      ref="httbRef"
      :btn-is-show="btnIsShow"
      :table-col="tabUserList"
      :table-data="tableUserData"
      width="250"
      @getDataDetileInfo="getDataDetileInfo"
      @deleteSelectData="deleteSelectData"
      @refresh="getUserList"
    />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
      <!-- 名称和路径必输 -->
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm autoClass">
        
        <el-form-item label="交换机名称" prop="exchangeName">
          <el-input v-model="ruleForm['exchangeName']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="集群名称" prop="clusterName">
          <el-input v-model="ruleForm['clusterName']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="控制台端口" prop="managePort">
          <el-input v-model="ruleForm['managePort']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="虚拟机名称" prop="virtualHost">
          <el-input v-model="ruleForm['virtualHost']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm['username']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm['password']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="服务地址" prop="host">
          <el-input v-model="ruleForm['host']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="服务端口" prop="port">
          <el-input v-model="ruleForm['port']" :disabled="disFlag" clearable placeholder="" />
        </el-form-item>
      </el-form>
      <div v-if="!disFlag" style="text-align: center;">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('return')">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { validateIP } from '@/utils/validate'
export default {
  components: {
  },
  data() {
    return {
      disFlag:false,
      btnIsShow: {
        operate: true,
        detile: true,
        del: true
      },
      title: '新增',
      rules: {
        host: [
            { validator: validateIP, trigger: 'change' }
          ],
      },
      dialogTableVisible: false,
      ruleForm: {
        "password": "",
        "virtualHost": "",
        "managePort": "",
        "clusterName": "",
        "host": "",
        "port": 0,
        "id": 0,
        "username": "",
        "exchangeName": ""
      },
      userId: '',
      formInline: {
        'clusterName': ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'clusterName',
          title: '集群名称'
        },
        {
          key: 'exchangeName',
          title: '交换机名称'
        },
        {
          key: 'managePort',
          title: '控制台端口'
        },
        {
          key: 'virtualHost',
          title: '虚拟机名称'
        },
        {
          key: 'hostport',
          title: '集群地址'
        }, {
          key: 'status',
          title: '状态'
        },
        {
          key: 'createTime',
          title: '创建时间'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: { 
    addUser(v) {
      this.title = '新增'
      this.dialogTableVisible = true
      this.resetForm(1)
    },
    getDataDetileInfo(v){
      this.title = ' '
      this.disFlag = true
      this.dialogTableVisible = true
      this.ruleForm = JSON.parse(v)
    },
    editRowData(v){
      this.title = '修改'
      this.disFlag = false
      this.dialogTableVisible = true
      this.ruleForm = JSON.parse(v)
    },
    resetForm(v) {
      if(!v||v!=1){
        this.dialogTableVisible = false
      }
      const keys = Object.keys(this.ruleForm)
      const o = {}
      keys.forEach((item, index) => {
        const v = this.ruleForm[item]
        if (typeof (v) === 'string') {
            o[item] = ''
        } else if (typeof (v) === 'number') {
          o[item] = ''
        } else if (typeof (v) === 'object') {
          if (v instanceof Array) {
            o[item] = []
          } else{
            o[item] = {}
          }
        }
      })
      this.ruleForm = JSON.parse(JSON.stringify(o))
    },
    deleteSelectData(v) {
      request({
          url: '/ht-datacenter/rabbit/removeRabbitMqById?id='+v.id,
          method: 'post',
          data:{}
        }).then(res => {
          if (res.code == 200) {
            this.getUserList()
            this.$message.success('删除成功')
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
    },
    submitForm() {
      if(this.title=='新增'){
        delete this.ruleForm.id
      }
      request({
          url: '/ht-datacenter/rabbit/addOrUpdateRabbitMq',
          method: 'post',
          data:this.ruleForm
        }).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
        this.dialogTableVisible = false
        this.$refs.httbRef.isShowLoading(true)
        request({
          url: '/ht-datacenter/rabbit/getRabbitMqList',
          method: 'post',
          data:{
            "clusterName":this.formInline.clusterName,
            "page": this.page,
            "limit": this.size
          }
        }).then(res => {
          if (res.code == 200) {
            this.tableUserData = res.data.records
            this.total = res.data.total
            this.$refs.httbRef.isShowLoading(false)
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            })
          }
        })
    }
  }
}
</script>

      <style lang="scss" scoped>
      >>>.jsoneditor-poweredBy {
        display: none !important;
      }

      .addPs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
        >div{
          width:50%
        }
        span{
          display: inline-block;
          width: 10%;
        }
      }
      .autoClass{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .el-form-item{
          width:50%;
        }
      }
      
      .addcs{
        display: flex;
        flex-direction: row;
        margin-bottom: 10px;
      }
      .addcs2 .el-select {
        display: inline-block;
        width: 240px;
      }
      .autoInput{
        display: inline-block;
        width: 70%;
      }
      .infoTitle{
        border-bottom:1px solid #e5e5e5;
        margin-bottom: 30px;
        position: relative;
      }
      .infoTitle>span{
        position: absolute;
        left: 20px;
        background: #fff;
        width:80px;
        top:-15px;
        height:30px;
        text-align: center;
        line-height: 30px;
      }
        .el-select{
           width:100%;
        }
        .timing{
          background:#fff;
          padding:20px;
        }
      </style>
